<script setup lang="ts">


import {
    ArrowDown,
    Check,
    CircleCheck,
    CirclePlus,
    CirclePlusFilled,
    Plus,
} from '@element-plus/icons-vue'

function getAssetsImages(name: string) {
    return new URL(`/src/assets/${name}`, import.meta.url).href
}

const handClick = () => {
    useRoute()
}
</script>
<template>
    <div>
        <el-row class="aui-nav" justify="space-around">
            <el-col :span="4" class="logo-container">
                <el-image
                        class="logo"
                        style="width: 100px; height: 70px"
                        :src="getAssetsImages('logo.png')"
                        fit="contain"
                ></el-image>
            </el-col>

            <el-col :span="12" class="nav-item">
                <!--                <div>-->
                <!--                    <el-dropdown class="drop" :hide-on-click="false">-->
                <!--                        <span class="el-dropdown-link">-->
                <!--                          聊天系统<el-icon class="el-icon&#45;&#45;right"><arrow-down/></el-icon>-->
                <!--                        </span>-->
                <!--                        <template #dropdown>-->
                <!--                            <el-dropdown-menu>-->
                <!--                                <el-dropdown-item :icon="Plus">-->
                <!--                                    <router-link to="/home/chat/"></router-link>-->
                <!--                                </el-dropdown-item>-->
                <!--                            </el-dropdown-menu>-->
                <!--                        </template>-->
                <!--                    </el-dropdown>-->
                <!--                </div>-->
            </el-col>
            <el-col :span="4">
                <div class="btn">
                    <el-button>登录</el-button>
                </div>
            </el-col>
        </el-row>
    </div>
</template>
<style lang="scss" scoped>
.logo-container{
    height: 70px;
}
.aui-nav {
  width: 100%;
  height: 70px;
  background: #fff;
  box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.1);
}

.nav-item {
  display: flex;
  justify-content: center;

  //flex: 1;
}

.nav-item div {
  //width: 20%;
  //display: flex;
  flex: 1;
  height: 70px;
}

.nav-item div:hover {
  color: #000;
  font-weight: 500;
  background-color: #f5f5f5;
}

.nav-item div :focus-visible {
  outline: none;
}

span {
  font-size: 15px !important;
  //font-family: Inter-Regular, Inter;
  font-weight: 400;
  color: #000;
  height: 70px;
  line-height: 70px;
  width: 100%;
  text-align: center;
  display: inline-block;
}

.drop {
  width: 100%;
  height: 70px;
}

.btn {
  height: 70px;
  line-height: 70px;
  margin: auto;
}
</style>
